'use strict';

function getUrlParam(variable) {
  const query = window.location.search.substring(1);
  const vars = query.split('&');
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split('=');
    if (pair[0] == variable) { return pair[1]; }
  }
  return (false);
}

const nameMap = {
  admission: '接诊',
  examination: '病理检查',
  result: '诊断结果',
  treatment: '治疗方案',
};

const Description = { template: '<div class="paragraph">{{description}}</div>',
  props: [ 'description' ],
};
const Pic = { template: '<div class="paragraph"><ul class="mylist"><li v-for="pic in pics"><img v-bind:src="pic.imgUrl"><li><ul></div>',
  props: [ 'pics' ],
};
const Video = { template: '<div class="paragraph"><ul class="mylist"><li v-for="video in videos"><video v-bind:src="video.videoUrl" controls="controls" autoplay="autoplay"><li><ul></div>',
  props: [ 'videos' ],
};
const Study = { template: '<div class="paragraph"><ul class="mylist"><li v-for="s in study"><h3>{{s.description}}</h3><img v-bind:src="s.link"><li><ul></div>',
  props: [ 'study' ],
};

const routes = [
  { path: '/description', component: Description },
  { path: '/pic', component: Pic },
  { path: '/video', component: Video },
  { path: '/study', component: Study },
];

const router = new VueRouter({
  routes,
});

const app = new Vue({
  router,
  data: {
    description: '',
    pics: [],
    videos: [],
    study: [],
    diseases: [],
    search: '',
    caseDetails: [],
    stage: '',
  },
  created() {
    this.getCaseInfo(getUrlParam('id'));
  },
  methods: {
    getDisease() {
      const that = this;
      $.ajax({
        url: '../getCase',
        type: 'POST',
        data: {
          keyword: that.search,
        },
        dataType: 'json',
        success(data) {
          that.diseases = data;
        },
        error(data) {
          console.error(data);
        },
      });
    },
    getCaseInfo(id) {
      console.log(id);
      const that = this;

      $.ajax({
        url: '../getCaseInfo',
        type: 'GET',
        data: {
          id,
        },
        success(data) {
          console.log(data);
          that.caseDetails = data.caseDetail;
        },
        error(data) {
          console.error(data);
        },
      });
    },
    changeStage(stage) {
      for (const i in this.caseDetails) {
        if (this.getStageName(this.caseDetails[i].stage) === stage) {
          const detail = this.caseDetails[i];
          this.description = detail.description;
          this.pics = detail.casePicture;
          this.videos = detail.caseVideo;
          this.study = detail.caseStudy;
        }
      }
    },
    getStageName(key) {
      return nameMap[key];
    },
  },
}).$mount('#app');
